<template>
  <div>
    <div class="empty"
         v-if="!farm.id">
      <text class="text-muted mb-3">您还没有创建农场</text>
      <vm-button size="medium"
                 text="去创建"
                 @buttonClicked="goCreateFarm"></vm-button>
    </div>

    <list v-else
          :showLoadMore="showLoadMore"
          @loadMore="onLoadMore">
      <cell>
        <text class="p-3 bg-white border-bottom">农场二维码</text>
      </cell>

      <cell>
        <div class="p-2 flex-row bg-white mb-3">
          <image class="qr-img mb-1"
                 :src="farmQrcode"></image>
          <div>
            <text class="qr-title text-primary">{{farm.farmName}}</text>
            <div class="flex-row">
              <vm-button text="下载"
                         size="medium"
                         type="white"
                         class="mr-1"></vm-button>
              <vm-button text="分享"
                         type="white"
                         size="medium"></vm-button>
            </div>
          </div>
        </div>
      </cell>

      <cell>
        <text class="p-3 bg-white border-bottom">产品二维码</text>
      </cell>

      <cell v-if="!products.length">
        <text class="text-muted empty">您还没有产品</text>
      </cell>

      <cell v-for="p in products"
            :key="p.id">
        <div class="p-2 flex-row bg-white">
          <image class="qr-img mb-1"
                 :src="p.qrcodeBase64"></image>
          <div>
            <text class="qr-title">{{p.productName}}</text>
            <div class="flex-row">
              <vm-button text="下载"
                         size="medium"
                         type="white"
                         class="mr-1"
                         @buttonClicked="downloadQrcode(p)"></vm-button>
              <vm-button text="分享"
                         type="white"
                         size="medium"
                         @buttonClicked="shareQrcode(p)"></vm-button>
            </div>
          </div>
        </div>
      </cell>
    </list>

  </div>
</template>
<script>
import VmButton from '../../components/vm-button.vue'
import { STORAGE_FARM } from '../../plugins/constant'
const baseUrl = weex.config.env.request

export default {
  components: {
    VmButton
  },
  props: {},
  data() {
    return {
      farm: {},
      farmQrcode: '',
      products: [],
      pageIndex: 1,
      totalPages: 1
    }
  },
  computed: {
    showLoadMore() {
      return this.pageIndex < this.totalPages
    }
  },
  watch: {},
  created() {
    this.getFarmInfo()
  },
  methods: {
    async getFarmInfo() {
      const farm = await this.$storage.get(STORAGE_FARM)
      this.farm = farm || {}
      const farmId = this.farm.id
      if (farmId) {
        this.farmQrcode = await this.$picture.qrcode({
          url: `${baseUrl}/androidh5/#/?farmId=${farmId}&job=other`
        })
        this.refresh()
      }
    },
    refresh() {
      this.pageIndex = 1
      this.getProducts()
    },
    getProducts() {
      this.$http({
        method: 'GET',
        name: 'industrial.farm.product',
        data: {
          farmId: this.farm.id,
          start: this.pageIndex,
          size: 10,
          freeze: 0,
          shelvesStatus: 1,
          isDelete: 0
        },
        errorMsg: '获取产品数据失败'
      }).then(res => {
        const data = res && res.data || []
        this.totalPages = res && res.totalPages || 0
        for (const p of data) {
          this.getQrcode(p)
        }
      })
    },
    onLoadMore() {
      this.pageIndex++
      this.getProducts()
    },
    getQrcode(p) {
      this.$picture.qrcode({
        url: `${baseUrl}/androidh5/#/aproinfo?farmId=${this.farm.id}&job=other&proname=${p.id}`
      }).then(res => {
        p.qrcodeBase64 = res
        this.products.push({ ...p })
      })
    },
    goCreateFarm() {
      this.$nav.open({ name: 'farm.create' })
    },
    // TODO: 下载
    downloadQrcode(p) { },
    // TODO: 分享
    shareQrcode(p) { }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.empty {
  padding: 30px;
  height: 500px;
  align-items: center;
  justify-content: center;
}
.text-muted {
  color: #999;
}
.mb-3 {
  margin-bottom: 30px;
}
.mb-1 {
  margin-bottom: 10px;
}
.mr-1 {
  margin-right: 10px;
}
.p-3 {
  padding: 30px;
}
.p-2 {
  padding: 20px;
}
.flex {
  flex: 1;
}
.flex-row {
  flex-direction: row;
}
.text-center {
  text-align: center;
  align-items: center;
}
.between {
  justify-content: space-between;
}
.stretch {
  align-items: stretch;
}
.bg-white {
  background-color: #fff;
}
.border-bottom {
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
}
.text-primary {
  color: $primary;
}

.qr-img {
  width: 220px;
  height: 220px;
}
.qr-title {
  height: 100px;
  margin-bottom: 20px;
  margin-top: 10px;
}
</style>
